<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件总线传参</title>
</head>
<body>
    <template id="my-counter">
        <div>
            <h2>计数器（子组件A）</h2>
            <p>{{count}}</p>
            <button @click="hancleClick">值加1</button>
        </div>
    </template>
    <template id="counter-view">
        <div>
            <h2>计数器显示（子组件B）</h2>
            <p>计数器的值：{{countIn}}</p>
        </div>
    </template>
    <main id="app">
        <my-counter></my-counter>
        <counter-view :count-in="count"></counter-view>
    </main>
</body>
<script src="../../vue.js"></script>
<script>
    let bus = new Vue();
    // 挂到原型对象上之后，所有vue对象都可以使用$bus
    Vue.prototype.$bus = bus;


    Vue.component("my-counter",{
        template: "#my-counter",
        data() {
            return {
                count: 0
            }
        },
        methods: {
            hancleClick() {
                // 在事件总线对象上触发事件
                this.$bus.$emit("increase",++ this.count);
            }
        }
    })

    Vue.component("counter-view",{
        template: "#counter-view",
        props: {
            countIn: {
                type: Number,
                default: 0
            }
        }
    })

    let vue = new Vue({
        el: "#app",
        data() {
            return {
                count: 0
            }
        },
        methods: {
        }
    })

    // 在事件总线对象上处理事件
    bus.$on("increase",function(value) {
        vue.count = value;
    })
</script>
</html>